<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="artFrom"
        :model="artFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="线路搜索：" label-for="line_id">
              <Input
                search
                enter-button
                placeholder="线路名称"
                v-model="artFrom.line_name"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="Button">
        <Button type="primary" icon="md-add" @click="lineFormVisible=true">添加线路景区</Button>
      </div>
      <Table
        ref="table"
        :columns="columns"
        :data="tableList"
        class="ivu-mt"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
        <template slot-scope="{ row, index }" slot="action">
          <a size="small" @click="edit(row)">编辑</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>
      <!-- 添加线路 -->
      <Modal title="添加景区线路" width="55%" v-model="lineFormVisible"  :mask-closable="false"   :z-index="1"   @on-cancel="resetLineForm('lineForm')"  @on-ok="addLine('lineForm')">
        <Form ref="lineForm" :model="lineForm" :rules="ruleValidate" :label-width="120" class="demo-ruleForm">
          <FormItem prop="line_name" label="线路名称:">
            <Input v-model="lineForm.line_name" />
          </FormItem>
          <FormItem prop="origin" label="出发地：">
            <Input v-model="lineForm.origin" />
          </FormItem>
          <FormItem prop="start_address" label="出发地详细地址：" >
            <div style="display: flex;align-items: center;">
              <Input v-model="lineForm.start_address" />
              <div v-if="lineForm.start_lng_lat" @click="addLngLat('start')"  style="margin-left:20px">{{lineForm.start_lng_lat}}</div>
              <Button v-else size="small" icon="ios-locate-outline" type="primary" style="margin-left:20px" @click="addLngLat('start')">添加经纬度</Button>
            </div>
          </FormItem>
          <FormItem prop="destination" label="目的地：">
            <Input v-model="lineForm.destination" />
          </FormItem>
          <FormItem prop="end_address" label="目的地详细地址：" >
            <div style="display: flex;align-items: center;">
              <Input v-model="lineForm.end_address" />
              <div v-if="lineForm.end_lng_lat" @click="addLngLat('end')"  style="margin-left:20px">{{lineForm.end_lng_lat}}</div>
              <Button v-else size="small" icon="ios-locate-outline" type="primary" style="margin-left:20px"  @click="addLngLat('end')">添加经纬度</Button>
            </div>
          </FormItem>
            <FormItem label="备注:">
            <Input v-model="lineForm.remark" maxlength="50" show-word-limit type="textarea" placeholder="输入备注" style="width: 200px" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 添加线路 -->    
      <!-- 选取经纬度 -->
       <Modal v-model="showjwd" width="45%" scrollablefooter-hide closable title="选取经纬度"  footer-hide :mask-closable="false"  :z-index="1"
      >
        <chooseAddress @getAddress="getAddress"></chooseAddress>
      </Modal>
      <!-- 选取经纬度 -->
    </Card>
    
</template>

<script>
import toExcel from "../../../utils/Excel.js";
import { mapState } from "vuex";
import {scenicLineLstApi,setStatusApi,saveScenicLineApi} from "@/api/scenic"
import chooseAddress from "@/components/chooseAddress";

import {
  exportBusPassengerListApi,
  exportLinePlanListApi,
} from "@/api/line";

import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "custom_busList",
  components: { chooseAddress},
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/userLevel", ["categoryId"]),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  data() {
    return {
      lineFormVisible:false,
      lineForm:{
        id:0,
        line_name:'',
        origin:'',
        destination:'',
        start_address:'',
        end_address:'',
        start_lng_lat:'',
        end_lng_lat:'',
        remark:'',
      },
      showjwd: false,
      addressType:"",
      template: false,
      modals: false,
      ruleValidate: {
        line_name: [
          { required: true, message: '请输入线路名称', trigger: 'blur' }
        ],
        origin: [
          { required: true, message: '请输入出发地', trigger: 'blur' }
        ],
        destination: [
          { required: true, message: '请输入目的地', trigger: 'blur' }
        ],
        start_address: [
          { required: true, message: '请输入出发地详细地址', trigger: 'blur' }
        ],
        end_address: [
          { required: true, message: '请输入目的地详细地址', trigger: 'blur' }
        ],
        
      },
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      artFrom: {
        line_name: '',
        page: 1,
        limit: 25
      },
      list: [],
      tableList: [],
      loading: false,
      columns: [
        {
          title: "线路ID",
          key: "id",
          width: 60,
        },
        {
          title: "线路名称",
          key: "line_name",
          width: 160,
        },
         {
          title: "出发地",
          key: "origin",
          width: 100,
        },
         {
          title: "目的地",
          key: "destination",
          width: 160,
        },
         {
          title: "出发地详细地址",
          key: "start_address",
          width: 160,
        },
         {
          title: "目的地详细地址",
          key: "end_address",
          width: 160,
        },
        {
          title: "备注",
          key: "remark",
          width: 160,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 100,
        },
      ],
      data: [],
      total: 0,
    
      // activeKey:1
    };
  },

  created() {
  },
  mounted() {
    this.getDataList();
  },
  methods: {
   
   addLngLat(item){
     this.addressType = item,
     this.showjwd = true
   },

   // 选取地址
   getAddress(data){
     if(this.addressType == 'start'){
       this.lineForm.start_lng_lat = data
     } else if(this.addressType == 'end'){
       this.lineForm.end_lng_lat = data
     }
     this.showjwd = false
   },
   // 添加线路
   addLine(formName){
     this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$Spin.show();
          saveScenicLineApi(this.lineForm).then(res => {
            this.$Spin.hide();
            this.$Message.success('保存成功');
            this.getDataList();
          }).catch(error => {
             this.$Message.error(error.msg);
          })
        } else {
          console.log('error submit333!!')
           setTimeout(() => {
              this.lineFormVisible = false;
              this.$nextTick(() => {
                this.lineFormVisible = true;
              });
            }, 200);
        }
      })
   },
   resetLineForm(formName){
      this.$refs[formName].resetFields()
   },

   // 上下架
    changeSwitch(row) {
      setStatusApi(row.id, row.status)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getDataList();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
       // 编辑
    edit(row) {
      this.lineForm = row
      this.lineFormVisible = true
    },
    // 数据导出；
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let formValidate = this.artFrom;
      this.$Spin.show();
      let lebData = await this.getExcelData(formValidate);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },

     // 数据；
    async exportPassenger() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let planId = this.exportPlanId;
      this.$Spin.show();
      let lebData = await this.getPassengerExcelData(planId);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },
    
    getPassengerExcelData(planId) {
      return new Promise((resolve, reject) => {
        exportBusPassengerListApi({plan_id:planId}).then((res) => {
          return resolve(res.data);
        });
      });
    },
    getExcelData(excelData) {
      return new Promise((resolve, reject) => {
        exportLinePlanListApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
   
    // 列表；
    getDataList() {
      this.loading = true;
      scenicLineLstApi(this.artFrom)
        .then((res) => {
          let data = res.data;
          this.tableList = data.list.map((item) => {
            if (this.isAll === 1) {
              item.checkBox = true;
            } else {
              item.checkBox = false;
            }
            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
   

    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
      this.$refs.table.clearCurrentRow();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.formSelection = [];
      this.getDataList();
    },
    


    
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-modal-mask {
  z-index: 999 !important;
}

/deep/.ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  >>> .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.ivu-table-cell-expand-expanded {
  margin-top: -6px;
  margin-right: 33px;
  transition: none;

  .ivu-icon {
    vertical-align: 2px;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}
</style>